import h from './mysndom/h';
import patch from './mysndom/patch'

const container = document.getElementById('container')
const btn = document.getElementById('btn')


// const node0 = h('div', {}, [
//   h('a', {}, 'blank'),
//   h('a', { props: { href: 'http://www.baidu.com'} }, 'link'),
//   h('a', { classlist: { active: true, diminish: false } }, 'class')
// ])
// const node1 = h('div', {}, [
//   h('a', {}, 'blank'),
//   h('a', { props: { href: 'http://www.baidu.com', target: '_blank'} }, 'new window'),
//   h('a', { props: { href: 'http://www.baidu.com'} }, 'link'),
//   h('a', { classlist: { active: true, diminish: false } }, 'class')
// ])

// 最后老师的 bug 的测试案例
// 意外的是，由于我很早发现了问题（Q2），所以竟然没有这个bug
const node0 = h('div', {}, [
  h('p', { key: 'A' }, 'A'),
  h('p', { key: 'B' }, 'B'),
  h('p', { key: 'C' }, 'C')
])
const node1 = h('div', {}, [
  h('p', { key: 'Q' }, 'Q'),
  h('p', { key: 'A' }, 'A'),
  h('p', { key: 'B' }, 'B'),
  h('p', { key: 'T' }, 'T'),
  h('p', { key: 'C' }, 'C')
])
const node2 = h('h1', {}, 'xixi')

patch(container, node0);
// console.log(node1)

btn.addEventListener('click', ()=>{ patch(node0, node1) })
